<template>
    <el-row>
        <el-col :span="8" :offset="8">
            <el-card class="box-card">
                <el-form id="loginForm" :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0">
                    <el-form-item>
                        <h2>登录</h2>
                    </el-form-item>
                    <el-form-item prop="loginId">
                        <el-input type="text" v-model="loginForm.loginId" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input type="password" v-model="loginForm.pwd" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="subForm('loginForm')" class="btn-login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
    export default{
        name: 'login',
        data(){
            return {
                loginForm: {
                    loginId: '',
                    pwd: ''
                },
                rules: {
                    loginId: [{required: true, message: '请输入账号', trigger: 'blur'}],
                    pwd: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        components: {},
        computed: {},
        methods: {
            subForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        sessionStorage.setItem('accessToken', '123456')
                        this.$router.push({path: 'home'})
                    }
                });
            }
        },
        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建
            document.getElementsByTagName('body')[0].style.backgroundColor = "#94c6dd";
            next();
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            document.getElementsByTagName('body')[0].style.backgroundColor = "#fff";
            next();
        }
    }
</script>
<style scoped>
    .box-card {
        width:300px;
        margin: 20% auto;
        background-color: rgb(198, 221, 235);
        text-align: center;
    }

    .btn-login {
        background-color: rgb(0, 180, 205);
        border: 0;
        width: 100px;
    }

    h2 {
        color: rgb(138, 155, 165);
    }
</style>